<template>
    <div>

        <div class="product">
            <div class="product-title">产品竞争力</div>
            <div id="Chart3" :style="{width: '100%', height: '180px'}"></div>

            <div class="collect-group" @click="onClick()">
                <div class="collect-group-label">
                    <p>判断标准：</p>
                    <p>(应收帐款+合同资产)占总资产的比例</p>
                </div>
                <div class="collect-group-text">
                    查看5年趋势
                    <div class="triangle"></div>
                </div>
            </div>
        </div>

        <!--弹出开始-->
        <van-popup v-model="show" :style="{ height: '60%',width: '90%' }" closeable round>
            <div class="popup-container">
                <div class="popup-container-title">产品竞争力</div>

                <div class="tag-group">
                    <span class="tag-box-2 tag-1"></span>
                    <div class="tag-group-text">(应收帐款+合同资产)占总资产的比例</div>
                </div>

                <div id="Chart4-popup" :style="{width: '100%', height: '300px'}"></div>
                <div class="popup-container-group">
                    <div v-for="(item,index) in resData" :key="index" :class="getMsg(item.contend).fix">{{ getMsg(item.contend).msg }}</div>
                </div>
            </div>

        </van-popup>
        <!--弹出结束-->

    </div>

</template>

<script>

    import {productContend} from "../../api/index";

    export default {
        name: "echart4",
        data(){
            return {
                show: false,
                resData: [],
                yearArr: [],
                ratioArr: [],
            }
        },
        mounted() {
            this.init();
        },
        methods: {
            async init(){

                let tscode = this.$route.query.tscode;
                let Chart3 = this.$echarts.init(document.getElementById('Chart3'));
                let color = new this.$echarts.graphic.LinearGradient(
                    1, 0, 0, 1,
                    [
                        {offset: 0, color: '#4765FA'},
                        {offset: 0.4, color: '#14E394'},
                        {offset: 1, color: '#14E394'}
                    ]
                );

                let contendObj = {};

                await productContend(tscode).then(res=>{
                    this.resData = res;
                    let contend = res[res.length -1].contend;
                    let ratio = res[res.length - 1].ratio;
                    contendObj = {
                        msg: this.getMsg(contend),
                        ratio: parseFloat((ratio * 100).toFixed(2))
                    };

                    let option = {
                        color: color,
                        itemStyle: {
                            color: '#58D9F9',
                            shadowColor: 'rgba(0,138,255,0.45)',
                            shadowBlur: 10,
                            shadowOffsetX: 2,
                            shadowOffsetY: 2
                        },
                        series: [
                            {
                                type: 'gauge',
                                startAngle: 180,
                                endAngle: 0,
                                radius: 130,
                                center: ['50%', '97%'],
                                height: '260px',
                                progress: {
                                    show: true
                                },
                                axisLine: {
                                    show: true,
                                    lineStyle: {
                                        width: 10,
                                        opacity: 1
                                    }
                                },
                                axisTick: {  //刻度线
                                    show: true,
                                    lineStyle: {
                                        color: '#D8D8D8'
                                    }
                                    /* length: 20,
                                     splitNumber: 2,
                                     lineStyle: {
                                         color: [[0.25, '#FF6E76'], [0.5, '#FDDD60'], [0.75, '#58D9F9'], [1, '#7CFFB2']],
                                         width: 5
                                     }*/
                                },
                                axisLabel: {
                                    distance: -38,
                                    show: false
                                },
                                splitLine: { // 分隔线
                                    show: true,
                                    lineStyle: {
                                        width: 2,
                                        color: '#D8D8D8'
                                    }
                                    /*length: 20,
                                    splitNumber: 2,
                                    lineStyle: {
                                        color: '#D8D8D8',
                                        width: 5
                                    }*/
                                },
                                pointer: { //指针
                                    show: true,
                                    icon: 'path://M65.582671 288.791335l446.417329 446.41733 446.417329-446.41733z',
                                    length: '8%',
                                    width: 8,
                                    height: 10,
                                    offsetCenter: [0, '-103%'],
                                    itemStyle: {
                                        color: '#25B8B7'
                                    }
                                },
                                title: {
                                    fontSize: 18,
                                    offsetCenter: [0, '-50%']
                                },
                                detail: {
                                    offsetCenter: [0, '-20'],
                                    valueAnimation: true,
                                    formatter: function (value) {
                                        return '{value|' + value.toFixed(0) + '}{unit|%}';
                                    },
                                    rich: {
                                        value: {
                                            fontSize: 50,
                                            fontWeight: 'bolder',
                                            color: '#333333'
                                        },
                                        unit: {
                                            fontSize: 18,
                                            color: '#333333',
                                            padding: [0, 0, -12, 0]
                                        }
                                    }
                                },
                                data: [
                                    {
                                        name: contendObj.msg,
                                        value: contendObj.ratio,
                                    }
                                ]
                            }
                        ]
                    };
                    Chart3.setOption(option);

                    let yearArr = [];
                    let ratioArr = [];
                    res.forEach(item=>{
                        yearArr.push(item.year);
                        ratioArr.push(parseFloat((item.ratio * 100).toFixed(2)));
                    });
                    this.yearArr = yearArr;
                    this.ratioArr = ratioArr;

                });
            },
            getMsg(val){
                let data = {};
                switch (parseInt(val)) {
                    case 0:
                        data = {
                            msg: '差',
                            fix: 'cha'
                        };
                        break;
                    case 1:
                        data = {
                          msg: '中',
                          fix: 'zhong'
                        };
                        break;
                    case 2:
                        data = {
                            msg: '良',
                            fix: 'liang'
                        };
                        break;
                    case 3:
                        data = {
                            msg: '优',
                            fix: 'you'
                        };
                        break;
                    default:
                        data = {
                            msg: '差',
                            fix: 'cha'
                        };
                        break;
                }
                return data;
            },
            onClick(){
                this.show = true;

                let option = {
                    color: '#6467F0',
                    /*legend: {
                        data: ['期间费用率/毛利率'],
                        left: '0',
                        top: '0',
                        textStyle: {
                            color: '#333',
                        }
                    },*/
                    grid: {
                        x: '50',
                        y: '32'
                    },
                    xAxis: {
                        type: 'category',
                        data: this.yearArr
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value}%'
                        },
                        axisLine:{
                            lineStyle: {
                                color: '#999999'
                            }
                        }
                    },
                    series: [
                        {
                            name: '期间费用率/毛利率',
                            data: this.ratioArr,
                            type: 'line',
                            itemStyle: {
                                color: '#6467F0'
                            },
                            lineStyle: {
                                normal: {
                                    color: '#6467F0'
                                }
                            },
                            areaStyle: {
                                color: '#6467F0',
                                opacity: 0.1
                            }
                        }
                    ]
                };

                this.$nextTick(() => {
                    let Chart = this.$echarts.init(document.getElementById('Chart4-popup'));
                    Chart.setOption(option);
                });
            }
        }
    }
</script>

<style scoped lang="less">
    .popup-container {
        width: calc(100% - 24px);
        overflow-x: hidden;
        padding: 20px 12px 0 12px;
        text-align: left;

        .popup-container-title {
            font-size: 18px;
            padding-bottom: 28px;
        }

        .popup-container-group {
            width: 72%;
            position: relative;
            top: -42px;
            left: 55px;
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            justify-items: center;
            font-size: 13px;
            color: #333333;
            text-align: center;
        }
    }
</style>
